<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"></script>
    <script>
        let tem;
        const random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
            'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

        function Create() {
            tem = "";
            for (let i = 0; i < 4; ++i) {
                const index = Math.floor(Math.random() * 36);
                tem += random[index];
            }
            document.getElementById("in2").value = tem;
        }

        /**
         * @return {boolean}
         */
        function JCode() {
            const cod = document.getElementById("in1").value.toUpperCase();
            if (cod.length <= 0) {
                document.getElementById("ECode").innerHTML = "请输入验证码".fontcolor("red");
                return false;
            }
            else if (cod !== tem) {
                document.getElementById("ECode").innerHTML = "验证码错误".fontcolor("red");
                return false;
            }
            else {
                document.getElementById("ECode").innerHTML = "";
                return true;
            }
        }

        function Check() {
            if (!JCode())   {
                alert("验证码错误，登录失败");
                return;
            }
            let i;
            let a = false;
            const eml = document.getElementById("email1").value;
            const pwd = document.getElementById("password1").value;
            for (i = 0; i < localStorage.length; ++i) {
                const kna = localStorage.key(i);
                const str = localStorage.getItem(kna);
                const site = JSON.parse(str);
                if (eml === site.eml) {
                    a = true;
                    break;
                }
            }
            if (!a) {
                alert("邮箱错误");
                return;
            }
            for (i = 0; i < localStorage.length; ++i) {
                const kna = localStorage.key(i);
                const str = localStorage.getItem(kna);
                const site = JSON.parse(str);
                if (pwd === site.pwd) {
                    alert("登陆成功");
                    location.href = "https://yxl76.gitee.io/three_phase/login_success_page.html?=" + kna + "+" + pwd;
                    return;
                }
            }
            alert("密码错误");
        }
    </script>
</head>

<body onload="Create()">
<div class="jumbotron" style="height: 260px;">
    <div class="container" style="text-align: center;">
        <h1><strong>兰陈昕的第三期作业</strong></h1>
        <h2><strong>感受更精彩的世界</strong></h2>
        <p>未有账户<a href="https://yxl76.gitee.io/three_phase/registration_page.html"> 点击注册</a></p>
    </div>
</div>
<div style="width: 240px; margin: auto;">
    <form class="form-horizontal">
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
                </span>
                <input type="email" class="form-control" id="email1" placeholder="电子邮箱">
            </div>
            <span id="EEmail"></span>
        </div>
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
                </span>
                <input type="password" class="form-control" id="password1" placeholder="密码">
            </div>
            <span id="EPassword1"></span>
        </div>
        <div>
            <div>
                <input type="text" id="in1" placeholder="验证码" onblur="JCode()">
                <input type="button" id="in2" onclick="Create()">
            </div>
            <span id="ECode"></span>
        </div>
        <br>
        <div>
            <button type="button" class="btn btn-primary btn-group-justified" onclick="Check()">登录</button>
        </div>
    </form>
</div>
</body>

</html>
